<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ page import="sg.edu.nus.dbd.util.Constants"%>
<%@ page import="java.util.Iterator"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>

<link href="css/calendar.css" type="text/css" rel="stylesheet"
	media="all" />
<script type="text/javascript" src="script/calendar.js"></script>
<script type="text/javascript" src="script/calendar-en.js"></script>
<script type="text/javascript" src="script/calendar-setup.js"></script>

<!-- ODReports.jsp -->
<div align="center">
<table cellspacing="0" cellpadding="0" border="0">
	<tbody>
		<tr>
			<td valign="top" style="padding: 0px; width: 100%;">
			<div class="box_region left">
			<div class="box">
			<div class="top">
			<div class="left">
			<div class="right">
			<div class="middle">
			<div class="box_title"><span class="boxtitle">On Demand
			Report Criteria</span></div>
			</div>
			</div>
			</div>
			</div>
			<div class="content" align="left">
			<form style="display: inline;" name="MyForm" method="post">
			<c:if
				test="${fn:length(errorMessages)>0}">
				<lu>
				<c:forEach var="errorMessage" items="${errorMessages}">
					<li><span class="error">${errorMessage}</span></li>
				</c:forEach>
			</c:if>
			<table cellspacing="2" cellpadding="0" border="0" width="100%">
				<tbody>
					<tr>
						<td colspan="3"><span class="mandatory">* indicates
						mandatory field</span></td>
					</tr>
					<tr>
						<td colspan="3">Please enter the criteria for the report:</td>
					</tr>
					<tr>
						<td nowrap><span class="formlabel">Parameter:</span></td>
						<td><img width="5" src="images/t.gif" alt="" /></td>
						<td nowrap valign="top"><select name="paramName">
							<option value=""></option>
							<%
								for (Iterator i = Constants.DASHBOARD_PARAMS_METRIC.keySet()
										.iterator(); i.hasNext();) {
									String key = (String) i.next();
									if (key.equals(request.getAttribute("paramName"))) {
							%>
							<option value="<%=key%>" selected="selected"><%=key%></option>
							<%
								} else {
							%>
							<option value="<%=key%>"><%=key%></option>
							<%
								}
								}
							%>
						</select></td>
					</tr>
					<tr>
						<td nowrap><span class="formlabel">Interval in minute:</span>
						<span class="required_icon" title="Required">*</span></td>
						<td><img width="5" src="images/t.gif" alt="" /></td>
						<td><input type="text" maxlength="10" size="20"
            name="interval" value="${interval}" /></td>
					</tr>
					<tr>
						<td nowrap><span class="formlabel">Start Date:</span> <span
							class="required_icon" title="Required">*</span></td>
						<td><img width="5" src="images/t.gif" alt="" /></td>
						<td nowrap><input type="text" name="startDate" id="f_date_s"
							value="${startDate}" size="20" /> <img
							src="images/icon_calendar.jpg" width="17" height="23" border="0"
							align="top" id="f_trigger_s" /> 
							<script type="text/javascript">
							Calendar.setup( {
								inputField :"f_date_s", //*
								ifFormat :"%d/%m/%Y %H:%M",
								showsTime :true,
								button :"f_trigger_s", //*
								step :1
							});
							</script>
						</td>
					</tr>
					<tr>
						<td nowrap><span class="formlabel">End Date:</span> <span
							class="required_icon" title="Required">*</span></td>
						<td><img width="5" src="images/t.gif" alt="" /></td>
						<td nowrap><input type="text" name="endDate" id="f_date_e"
							value="${endDate}" size="20" /> <img
							src="images/icon_calendar.jpg" width="17" height="23" border="0"
							align="top" id="f_trigger_e" />
							<script type="text/javascript">
							Calendar.setup( {
								inputField :"f_date_e", //*
								ifFormat :"%d/%m/%Y %H:%M",
								showsTime :true,
								button :"f_trigger_e", //*
								step :1
							});
							</script>
						</td>
					</tr>
					<tr>
						<td colspan="3">
						<table cellspacing="0" cellpadding="0" border="0"
							class="form_submit" summary="">
							<tbody>
								<tr>
									<td><input type="submit" class="buttontext"
										value="Show Report" /></td>
								</tr>
							</tbody>
						</table>
						</td>
					</tr>
				</tbody>
			</table>
			</form>
			</div>
			<div class="bottom">
			<div class="left">
			<div class="right">
			<div class="middle"></div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</td>
		</tr>
		<c:if test="${fn:length(odReportDataList)>0}">
			<tr>
				<td valign="top" style="padding: 0px; width: 100%;">
				<div class="box_region left">
				<div class="box">
				<div class="top">
				<div class="left">
				<div class="right">
				<div class="middle">
				<div class="box_title"><span class="boxtitle">Report
				Results</span></div>
				</div>
				</div>
				</div>
				</div>
				<div class="content">
				<table width="800" class="formlabel">
					<tr>
						<td>Metric Name:</td>
						<td><%=Constants.DASHBOARD_PARAMS_METRIC
										.get((String) request
												.getAttribute("paramName"))%></td>
					</tr>
					<tr>
						<td>Interval in minutes:</td>
						<td>${interval}</td>
					</tr>
					<tr>
						<td>Start Date:</td>
						<td>${startDate}</td>
					</tr>
					<tr>
						<td>End Date:</td>
						<td>${endDate}</td>
					</tr>
				</table>
				<br />
				<table width="800">
					<thead>
						<th align="left" nowrap>No.</th>
						<th align="left" nowrap>Date Range</th>
						<th align="left" nowrap>Avarage Value</th>
					</thead>
					<c:forEach var="odReportData" items="${odReportDataList}"
						varStatus="status">
						<tr class="cellstatus">
							<td align="left" class="nobright normaltext" width="5">${status.index
							+ 1}</td>
							<td align="left" class="nobright normaltext">${odReportData.timeBlockName}</td>
							<td align="left"
								class="${(odReportData.aggregatedValue==-1)?'nobright normaltext':((!inverse && odReportData.aggregatedValue < warningLevel) || (inverse && odReportData.aggregatedValue > criticalLevel))?'bright healthy':(((!inverse && odReportData.aggregatedValue >= criticalLevel) || (inverse && odReportData.aggregatedValue <= warningLevel))?'bright critical':'bright warning')}">${(odReportData.aggregatedValue<0)?'N/A':odReportData.aggregatedValue}</td>
						</tr>
					</c:forEach>
				</table>
				</div>
				<div class="bottom">
				<div class="left">
				<div class="right">
				<div class="middle"></div>
				</div>
				</div>
				</div>
				</div>
				</div>
				</td>
			</tr>
		</c:if>
	</tbody>
</table>
</div>
<!-- End of ODReports.jsp -->
